@import "mixins/mixins";
@import "common/var";
@import "_main";
@import "mixins/hairline.scss";

@include b(charge) {
  background: #ebeeee;
  height: 100%;

  @include e(header) {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    color: #333333;
    background: #fff;
    height: 46px;

    span {
      color: #ec8c3b;
      font-size: 14px;
    }

    &::after {
      @include hairline-bottom(#ddd, 15px);
    }
  }

  @include e(listwrap) {
    background: #fff;
    & .title {
      position: relative;
      padding: 0 10px 0 15px;
      display: flex;
      align-items: center;
      height: 53px;
      font-size: 18px;
      font-weight: 500;
      color: #2f3234;
      border-bottom: 1rpx solid #ddd;

      &::after {
        @include hairline-bottom(#ddd 15px);
      }
    }
  }

  @include e(listcontainer) {
    display: flex;
    flex-direction: column;
  }

  @include e(list) {
    position: relative;
    padding: 0 10px 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    font-size: 18px;
    color: #2e3131;
    .unit {
      font-size: 14px;
      color: #494949;
    }
    .price {
      font-size: 12px;
      color: #fff;
      background: #c4222d;
      padding: 5px 10px;
      border-radius: 5px;
    }
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border-bottom: 0;
    }

    &::after {
      @include hairline-bottom(#ddd 15px);
    }
  }
}